<!-- 用户和用户自己的求职信息页面 -->
<template>
    <div>
        <reception-header/>
        <div class="user">
            <div class="da-wrapper">
                <div class="da-content">
                    <!-- 头像 -->
                    <div class="user-area">
                        <div><img :src="userAvatar" alt="" class="avatar-user-detail"></div>
                        <div class="username">{{userName}}</div>
                        <div class="chat-btn" v-if="remarks === '企业'"><el-button type="success" plain @click="toChat"><i class="el-icon-chat-line-round"></i>{{chatWithUser}}</el-button></div>
                        <div class="collect-user">
                            <el-button type="success" plain v-if="!isCollection" @click="toCollection"><i class="el-icon-star-off"></i>收藏用户</el-button>
                            <el-button type="success" plain v-if="isCollection" @click="cancelCollection"><i class="el-icon-star-on"></i>取消收藏</el-button>                       
                        </div>
                    </div>
                    <!-- 简介 -->
                    <div class="introduction">
                        <el-descriptions title="简介">
                            <el-descriptions-item label="性别">
                                <el-tag size="small" v-if="userSex === '男'">{{userSex}}</el-tag>
                                <el-tag size="small" type="success" v-if="userSex === '女'">{{userSex}}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="手机号">{{userPhone}}</el-descriptions-item>
                            <el-descriptions-item label="邮箱">{{userEmail}}</el-descriptions-item>
                            <el-descriptions-item label="学校">{{userSchool}}</el-descriptions-item>
                            <el-descriptions-item label="联系地址">{{userAddress}}</el-descriptions-item>
                            <el-descriptions-item label="状态">
                                <el-tag size="small">求职中</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <!-- 意向工作 -->
                    <div>
                        <el-divider>
                            <i class="el-icon-mobile-phone"></i>
                            <span class="yixiang">&nbsp;意向工作&nbsp;</span>
                            <i class="el-icon-mobile-phone"></i>
                        </el-divider>
                        <div class="work-container">
                            <div class="work" v-for="(item,index) in expectWorkList" :key="index">
                                <el-row>
                                    <el-col :span="12" class="jobName">
                                        {{item.jobName}}
                                        <span class="work-address">（{{item.workAddress ? item.workAddress : '全国'}}）</span>
                                    </el-col>
                                    <el-col :span="12" class="salary">
                                        <span class="expect-salary">期望薪资</span>
                                        {{item.salary}}
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
import ReceptionHeader from '../../../components/ReceptionHeader.vue';
import { getStore } from '../../../storage/storage';
import { getUserInfoAndJobInfo } from '../../../api/jobInfoManageApi';
import { getCurrentLoginRoleName } from '../../../api/dataViewApi/index';
import { checkThisUserExpectWorkIsCollection,companyCollection,cancelCollectUserExpectWork } from '../../../api/collection/index';
import { companyChatUser,checkIsChart } from '../../../api/message/index';
export default {
  components: { ReceptionHeader },
  data () {
    return {
        remarks: '', // 当前登陆用户的角色
        chatWithUser: '沟通', // 沟通按钮里面的文字内容
        userJobAid: this.$route.query.userJobAid, // 用户工作aid
        userAvatar: 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/jianyeu1.png', // 用户头像
        userName: '范占国', // 用户名
        userPhone: '18387008391', // 用户联系电话
        userAddress: '云南省昆明市云南师范大学', // 用户居住地址
        userSex: '男', // 用户性别
        userSchool: '云南师范大学', // 用户毕业学校  
        userEmail: '1840633803@qq.com', // 用户邮箱   
        jobName: 'web前端工程师', // 意向工作名称
        salary: '9K', // 期望薪资
        workAddress: '全国', // 期望工作地点
        expectWorkList: [], // 意向工作列表
        isCollection: false, // 当前登陆的企业是否收藏
    }
  },
  created(){
    // 获取被点击用户的信息以及用户的求职信息
    this.getUserInfoAndJobInfoFunc();

      // 判断当前这个用户的意向职位是否被收藏
    this.checkThisWorkIsCollectionFunc();

    // 判断企业是否与用户沟通过
    this.checkIsChartFunc();
  },
  methods:{

    // 获取被点击用户的信息以及用户的求职信息
    getUserInfoAndJobInfoFunc(){
        const params = {
            userJobAid: this.userJobAid,
        }
        getUserInfoAndJobInfo(params).then(res=>{
            // console.log(res);
            this.userAvatar = res.data.data.userAvatar ? res.data.data.userAvatar : 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/jianyeu1.png';
            this.userName = res.data.data.userName;
            this.userSex = res.data.data.userSex;
            this.userPhone = res.data.data.userPhone;
            this.userEmail = res.data.data.userEmail;
            this.userSchool = res.data.data.userSchool ? res.data.data.userSchool : '未知';
            this.userAddress = res.data.data.userAddress;
            this.expectWorkList = res.data.data.jobList;
        })
    },

    // 收藏
    toCollection(){
        const params = {
            account: getStore("account"),
        }
        const _this = this;
        getCurrentLoginRoleName(params).then(res=>{
            if(res.data.data.remarks === '用户' || res.data.data.remarks === '管理员'){
                _this.$message({
                    message: '您不能收藏其他用户的意向岗位！',
                    type: 'error',
                    duration: 800,
                })
            }else if(res.data.data.remarks === '企业'){
                // 收藏
                const params = {
                    account: getStore("account"),
                    userJobAid: _this.userJobAid,
                }
                companyCollection(params).then(res=>{
                    // console.log(res);
                    _this.$message({
                        message: res.data.message,
                        type: 'success',
                        duration: 700,
                    });
                    _this.isCollection = true;
                });
            }
        });
    },

    // 判断当前这个用户的意向工作是否被收藏
    checkThisWorkIsCollectionFunc(){
      const params = {
        account: getStore("account"),
      }
      const _this = this;
      setTimeout(() => {
        getCurrentLoginRoleName(params).then(res=>{
            if(res.data.data.remarks === '企业'){
                this.remarks = res.data.data.remarks;
                const params = {
                    account: getStore("account"),
                    userJobAid: _this.userJobAid,
                }
                checkThisUserExpectWorkIsCollection(params).then(res=>{
                    // console.log(res);
                    if (res.data.data) {
                        _this.isCollection = true;
                    }else{
                        _this.isCollection = false;
                    }
                })
            }        
        });
      }, 100);
    },

    // 取消收藏
    cancelCollection(){
        const params = {
            account: getStore("account"),
            userJobAid: this.userJobAid,
        }
        cancelCollectUserExpectWork(params).then(res=>{
            this.$message({
                message: res.data.message,
                type: 'success',
                duration: 500,
            });
            this.isCollection = false;
        })
    },

    // 企业去跟用户沟通
    toChat(){
        const params = {
            userJobAid: this.userJobAid,
            account: getStore("account")
        }
        companyChatUser(params).then(res=>{
            if (res.data.code === 10000) {
                this.$router.push('/reception/myMessagePage');
            }
        })
    },

    // 判断企业是否与用户沟通过
    checkIsChartFunc(){
        const params = {
            userJobAid: this.userJobAid,
            account: getStore("account")
        }
        checkIsChart(params).then(res=>{
            console.log(res);
            if (res.data.data) {
                this.chatWithUser = "继续沟通";
            }else{
                this.chatWithUser = "沟通";
            }
        })
    },

  },
}
</script>

<style scoped>
@import '../../../assets/css/reception/userAndJobPage.css';
</style>
